<template>
  <div class="profile-page">
    <div class="page-header">
      <h1>个人中心</h1>
      <p>管理您的个人信息和账户设置</p>
    </div>

    <el-row :gutter="30">
      <el-col :span="8">
        <!-- 个人信息卡片 -->
        <el-card class="profile-card">
          <div class="profile-avatar">
            <img :src="userInfo.avatar || 'https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?w=200&h=200&fit=crop&crop=face'" />
            <el-button type="primary" size="small" @click="uploadAvatar">更换头像</el-button>
          </div>
          <div class="profile-info">
            <h3>{{ userInfo.username }}</h3>
            <p>{{ userInfo.realName }}</p>
            <el-tag type="success">正常用户</el-tag>
          </div>
        </el-card>

        <!-- 统计信息 -->
        <el-card class="stats-card">
          <template #header>
            <h3>我的统计</h3>
          </template>
          <div class="stats-grid">
            <div class="stat-item">
              <div class="stat-number">{{ stats.totalOrders }}</div>
              <div class="stat-label">总订单数</div>
            </div>
            <div class="stat-item">
              <div class="stat-number">{{ stats.completedOrders }}</div>
              <div class="stat-label">已完成</div>
            </div>
            <div class="stat-item">
              <div class="stat-number">{{ stats.pendingOrders }}</div>
              <div class="stat-label">待处理</div>
            </div>
          </div>
        </el-card>
      </el-col>

      <el-col :span="16">
        <!-- 个人信息编辑 -->
        <el-card class="edit-card">
          <template #header>
            <h3>个人信息</h3>
          </template>
          <el-form :model="editUserInfo" label-width="100px" :rules="formRules" ref="formRef">
            <el-row :gutter="20">
              <el-col :span="12">
                <el-form-item label="用户名" prop="username">
                  <el-input v-model="userInfo.username" disabled />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="真实姓名" prop="realName">
                  <el-input v-model="editUserInfo.realName" />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="20">
              <el-col :span="12">
                <el-form-item label="手机号码" prop="phone">
                  <el-input v-model="editUserInfo.phone" />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="性别" prop="gender">
                  <el-select v-model="editUserInfo.gender" style="width: 100%;">
                    <el-option label="女" :value="0" />
                    <el-option label="男" :value="1" />
                    <el-option label="其他" :value="2" />
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="20">
              <el-col :span="12">
                <el-form-item label="生日" prop="birthday">
                  <el-date-picker
                    v-model="editUserInfo.birthday"
                    type="date"
                    placeholder="选择生日"
                    format="YYYY-MM-DD"
                    value-format="YYYY-MM-DD"
                    style="width: 100%;"
                  />
                </el-form-item>
              </el-col>
            </el-row>
            <el-form-item>
              <el-button type="primary" @click="saveProfile" :loading="saving">
                保存修改
              </el-button>
              <el-button @click="resetForm">重置</el-button>
            </el-form-item>
          </el-form>
        </el-card>

        <!-- 修改密码 -->
        <el-card class="password-card">
          <template #header>
            <h3>修改密码</h3>
          </template>
          <el-form :model="passwordForm" label-width="100px" :rules="passwordRules" ref="passwordFormRef">
            <el-form-item label="当前密码" prop="oldPassword">
              <el-input v-model="passwordForm.oldPassword" type="password" show-password />
            </el-form-item>
            <el-form-item label="新密码" prop="newPassword">
              <el-input v-model="passwordForm.newPassword" type="password" show-password />
            </el-form-item>
            <el-form-item label="确认密码" prop="confirmPassword">
              <el-input v-model="passwordForm.confirmPassword" type="password" show-password />
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="changePassword" :loading="changingPassword">
                修改密码
              </el-button>
            </el-form-item>
          </el-form>
        </el-card>

        <!-- 账户安全 -->
        <el-card class="security-card">
          <template #header>
            <h3>账户安全</h3>
          </template>
          <div class="security-items">
            <div class="security-item">
              <div class="security-info">
                <h4>手机绑定</h4>
                <p>已绑定手机：{{ userInfo.phone || '未绑定' }}</p>
              </div>
              <el-button type="primary" size="small" @click="editPhone">修改</el-button>
            </div>
          </div>
          <div class="address-preview" v-if="addressList.length">
            <h4 style="margin: 16px 0 8px 0;">常用地址</h4>
            <div v-for="(addr, idx) in addressList.slice(0,2)" :key="addr.id" class="address-item" style="margin-bottom: 8px;">
              <el-tag v-if="addr.isDefault === 1" type="success" size="small" style="margin-right: 6px;">默认</el-tag>
              {{ addr.receiver }}，{{ addr.phone }}，{{ addr.province + addr.city + addr.district + addr.detail }}
            </div>
            <el-button type="text" @click="showAddressDialog = true">地址管理</el-button>
          </div>
        </el-card>

        <el-button
          v-if="isPhotographer"
          type="primary"
          @click="$router.push('/photographer/orders')"
          style="margin-bottom: 20px"
        >
          管理用户下单关联我的订单
        </el-button>

        <el-button
          v-if="isPhotographer"
          type="primary"
          @click="$router.push('/photographer/packages')"
          style="margin-bottom: 20px"
        >
          套餐管理
        </el-button>

        <div style="display: flex; gap: 12px; margin-bottom: 20px;">
          <el-button v-if="!isPhotographer" type="primary" @click="showApplicationDialog = true">查看申请进度</el-button>
          <el-button type="primary" @click="showAddressDialog = true">地址管理</el-button>
          <el-button type="primary" @click="locateMe">定位</el-button>
        </div>

        <!-- 作品集卡片和上传弹窗 -->
        <el-card class="portfolio-card" style="margin-top: 24px; cursor: pointer;" @click="$router.push('/photographer/portfolio')">
          <template #header>
            <h3>我的作品集</h3>
            <!-- 上传作品按钮移除，入口只保留跳转 -->
          </template>
          <div style="text-align:center; color:#888; padding:40px 0;">
            点击进入作品管理，可上传、编辑、设为精选等
          </div>
        </el-card>
      </el-col>
    </el-row>

    <el-dialog v-model="phoneDialogVisible" title="修改手机号" width="400px">
      <el-form>
        <el-form-item label="新手机号">
          <el-input v-model="newPhone" />
        </el-form-item>
        <el-form-item label="验证码">
          <el-input v-model="phoneCode" style="width: 180px; margin-right: 10px;" />
          <el-button
            :disabled="codeBtnDisabled"
            @click="sendPhoneCode"
            size="small"
            type="primary"
          >
            {{ codeBtnText }}
          </el-button>
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="phoneDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="handlePhoneUpdate">确定</el-button>
      </template>
    </el-dialog>

    <el-dialog v-model="showApplicationDialog" title="我的摄影师申请进度" width="600px">
      <el-table :data="myApplications" style="width: 100%">
        <el-table-column prop="createTime" label="申请时间" />
        <el-table-column prop="status" label="状态" />
        <el-table-column prop="remark" label="审核备注" />
      </el-table>
      <template #footer>
        <el-button @click="showApplicationDialog = false">关闭</el-button>
      </template>
    </el-dialog>

    <el-dialog v-model="showAddressDialog" title="我的地址管理" width="600px">
      <el-table :data="addressList" style="width: 100%">
        <el-table-column prop="receiver" label="收件人" />
        <el-table-column prop="phone" label="电话" />
        <el-table-column label="详细地址">
          <template #default="{ row }">
            {{ row.province + row.city + row.district + row.detail }}
          </template>
        </el-table-column>
        <el-table-column label="默认">
          <template #default="{ row }">
            <el-tag v-if="row.isDefault === 1" type="success">默认</el-tag>
            <el-button v-else size="small" @click="setDefaultAddress(row.id)">设为默认</el-button>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template #default="{ row }">
            <el-button size="small" type="danger" @click="deleteAddress(row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-form :model="newAddress" label-width="70px" style="margin-top: 20px">
        <el-form-item label="收件人"><el-input v-model="newAddress.receiver" /></el-form-item>
        <el-form-item label="电话"><el-input v-model="newAddress.phone" /></el-form-item>
        <el-form-item label="省"><el-input v-model="newAddress.province" /></el-form-item>
        <el-form-item label="市"><el-input v-model="newAddress.city" /></el-form-item>
        <el-form-item label="区"><el-input v-model="newAddress.district" /></el-form-item>
        <el-form-item label="详细"><el-input v-model="newAddress.detail" /></el-form-item>
        <el-form-item>
          <el-button type="primary" @click="addAddress">新增地址</el-button>
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="showAddressDialog = false">关闭</el-button>
      </template>
    </el-dialog>

    <el-dialog v-model="avatarDialogVisible" title="头像管理" width="400px">
      <el-upload
        class="avatar-uploader"
        :show-file-list="false"
        :http-request="handleAvatarUpload"
        accept="image/*"
      >
        <el-button type="primary">上传新头像</el-button>
      </el-upload>
      <div class="avatar-list">
        <div
          v-for="a in avatarList"
          :key="a.id"
          class="avatar-item"
          :class="{ current: a.isCurrent === 1 }"
        >
          <img :src="a.url" class="avatar-img" />
          <el-button v-if="a.isCurrent !== 1" size="small" @click="setCurrentAvatar(a.id)">设为当前</el-button>
          <el-button v-if="a.isCurrent !== 1" size="small" type="danger" @click="deleteAvatar(a.id)">删除</el-button>
          <el-tag v-if="a.isCurrent === 1" type="success">当前头像</el-tag>
        </div>
      </div>
    </el-dialog>

    <div v-if="previewLatLng" style="margin: 16px 0;">
      <div id="previewMap" style="width: 100%; height: 300px;"></div>
      <div style="margin-top: 8px;">
        <span>定位坐标：{{ previewLatLng.lat }}, {{ previewLatLng.lng }}</span>
        <button @click="uploadLocation" style="margin-left: 16px; padding: 6px 18px; background: #67c23a; color: #fff; border: none; border-radius: 4px; cursor: pointer;">确认上传</button>
        <button @click="cancelPreview" style="margin-left: 8px; padding: 6px 18px; background: #f56c6c; color: #fff; border: none; border-radius: 4px; cursor: pointer;">取消</button>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted, onUnmounted, watchEffect, watch } from 'vue'
import { useRouter } from 'vue-router' 
import { useUserStore } from '../stores/user'
import { ElMessage, ElDialog } from 'element-plus'
import type { FormInstance, FormRules } from 'element-plus'
import api from '../utils/api'
import dayjs from 'dayjs'
import axios from 'axios'
import { nextTick } from 'vue'

const router = useRouter() 
const userStore = useUserStore()
const formRef = ref<FormInstance>()
const passwordFormRef = ref<FormInstance>()
const saving = ref(false)
const changingPassword = ref(false)
const phoneDialogVisible = ref(false)
const newPhone = ref('')
const phoneCode = ref('')
const codeBtnText = ref('获取验证码')
const codeBtnDisabled = ref(false)
const codeTimer = ref<number | null>(null)
const isPhotographer = ref(false)
const showApplicationDialog = ref(false)
const myApplications = ref<any[]>([])
const showAddressDialog = ref(false)
const addressList = ref<any[]>([])
const newAddress = reactive({ receiver: '', phone: '', province: '', city: '', district: '', detail: '' })
const previewLatLng = ref<{ lat: number; lng: number } | null>(null)
let previewMap = null
const avatarDialogVisible = ref(false)
const avatarList = ref<any[]>([])
const showUploadDialog = ref(false)
const newWork = ref({
  title: '',
  description: '',
  category: '',
  tags: '',
  coverImage: '',
  imageUrls: [],
  shootingDate: '',
  shootingLocation: '',
  equipment: ''
})
const imageFileList = ref([])
const myPhotographerId = ref(null)

// 用户信息
const userInfo = reactive({
  id: '',
  username: '',
  realName: '',
  phone: '',
  gender: '',
  birthday: '',
  avatar: '',
  // ...其它字段
})

// 统计信息
const stats = reactive({
  totalOrders: 12,
  completedOrders: 8,
  pendingOrders: 4
})

// 密码表单
const passwordForm = reactive({
  oldPassword: '',
  newPassword: '',
  confirmPassword: ''
})

// 表单验证规则
const formRules: FormRules = {
  realName: [
    { required: true, message: '请输入真实姓名', trigger: 'blur' }
  ],
  phone: [
    { required: true, message: '请输入手机号码', trigger: 'blur' },
    { pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号码', trigger: 'blur' }
  ]
}

// 密码验证规则
const passwordRules: FormRules = {
  oldPassword: [
    { required: true, message: '请输入当前密码', trigger: 'blur' }
  ],
  newPassword: [
    { required: true, message: '请输入新密码', trigger: 'blur' },
    { min: 6, message: '密码长度不能少于6位', trigger: 'blur' }
  ],
  confirmPassword: [
    { required: true, message: '请确认新密码', trigger: 'blur' },
    {
      validator: (rule, value, callback) => {
        if (value !== passwordForm.newPassword) {
          callback(new Error('两次输入的密码不一致'))
        } else {
          callback()
        }
      },
      trigger: 'blur'
    }
  ]
}

// 同步用户信息到编辑表单
const syncUserInfoToEdit = () => {
  Object.assign(editUserInfo, {
    realName: userInfo.realName || '',
    phone: userInfo.phone || '',
    gender:
      userInfo.gender !== undefined && userInfo.gender !== null && userInfo.gender !== ''
        ? Number(userInfo.gender)
        : '',
    birthday: userInfo.birthday || ''
  })
}

// 重置表单
const resetForm = () => {
  syncUserInfoToEdit()
  formRef.value?.clearValidate()
}

// 修改密码
const changePassword = async () => {
  try {
    await passwordFormRef.value?.validate()
    // 这里添加修改密码的逻辑
    ElMessage.success('密码修改成功')
    passwordForm.oldPassword = ''
    passwordForm.newPassword = ''
    passwordForm.confirmPassword = ''
  } catch (error) {
    ElMessage.error('密码修改失败')
  }
}

// 获取用户详细信息
const fetchUserInfo = async () => {
  if (!userStore.user?.id) return
  try {
    const res = await api.get(`/photo/user/${userStore.user.id}`)
    if (res.code === 1 && res.data && typeof res.data === 'object' && !Array.isArray(res.data)) {
      Object.assign(userInfo, res.data)
      // 同步到编辑表单
      syncUserInfoToEdit()
    } else {
      ElMessage.error(res.msg || '服务器异常')
    }
  } catch (error) {
    ElMessage.error('获取用户信息失败')
  }
}

const editPhone = () => {
  phoneDialogVisible.value = true
}

// 发送验证码
const sendPhoneCode = async () => {
  const phone = newPhone.value.trim()
  if (!/^1[3-9]\d{9}$/.test(phone)) {
    ElMessage.error('请输入正确的手机号')
    return
  }
  try {
    const res = await api.post('/photo/user/sendPhoneCode', { phone })
    if (res.data) {
      ElMessage.success('验证码：' + res.data)
    } else {
      ElMessage.success('验证码已发送')
    }
    // 按钮倒计时
    codeBtnDisabled.value = true
    let seconds = 60
    codeBtnText.value = `${seconds}s后重试`
    codeTimer.value = setInterval(() => {
      seconds--
      codeBtnText.value = `${seconds}s后重试`
      if (seconds <= 0) {
        clearInterval(codeTimer.value!)
        codeBtnText.value = '获取验证码'
        codeBtnDisabled.value = false
      }
    }, 1000)
  } catch (e) {
    ElMessage.error('验证码发送失败')
  }
}

const handlePhoneUpdate = async () => {
  if (!/^1[3-9]\d{9}$/.test(newPhone.value)) {
    ElMessage.error('请输入正确的手机号')
    return
  }
  if (!phoneCode.value) {
    ElMessage.error('请输入验证码')
    return
  }
  try {
    // 调用后端接口校验验证码并修改手机号
    await api.post('/photo/user/updatePhone', {
      userId: userInfo.id,
      phone: newPhone.value,
      code: phoneCode.value
    })
    ElMessage.success('手机号修改成功')
    userInfo.phone = newPhone.value
    phoneDialogVisible.value = false
  } catch (e) {
    ElMessage.error('手机号修改失败，请检查验证码')
  }
}

const editUserInfo = reactive({
  realName: '',
  phone: '',
  gender: '',
  birthday: ''
})

// 获取摄影师列表
const checkPhotographer = async () => {
  if (!userStore.user?.id) return
  try {
    const res = await api.get('/photo/photographer/list')
    const photographer = (res.data || []).find(
      (p: any) => p.userId === userStore.user?.id
    )
    isPhotographer.value = !!photographer
  } catch (error) {
    console.error('检查摄影师状态失败:', error)
  }
}

// 获取申请列表
const fetchMyApplications = async () => {
  if (!userStore.user?.id) return
  const res = await api.get(`/application/user/${userStore.user.id}`)
  myApplications.value = res.data || []
}

watch(showApplicationDialog, (val) => {
  if (val) fetchMyApplications()
})

// 获取地址列表
const fetchAddressList = async () => {
  if (!userStore.user?.id) return
  const res = await api.get(`/address/${userStore.user.id}`)
  addressList.value = res.data || []
}

const addAddress = async () => {
  if (!userStore.user?.id) return
  await api.post('/address', { ...newAddress, userId: userStore.user.id })
  ElMessage.success('地址添加成功')
  Object.assign(newAddress, { receiver: '', phone: '', province: '', city: '', district: '', detail: '' })
  fetchAddressList()
}

const deleteAddress = async (id: number) => {
  await api.delete(`/address/${id}`)
  ElMessage.success('地址已删除')
  fetchAddressList()
}

const setDefaultAddress = async (id: number) => {
  if (!userStore.user?.id) return
  await api.post('/address/default', null, { params: { userId: userStore.user.id, addressId: id } })
  ElMessage.success('已设为默认地址')
  fetchAddressList()
}

watch(showAddressDialog, (val) => { if (val) fetchAddressList() })

const locateMe = () => {
  if (!navigator.geolocation) {
    alert('当前浏览器不支持地理定位')
    return
  }
  navigator.geolocation.getCurrentPosition(
    async (pos) => {
      console.log('定位成功', pos)
      const { latitude, longitude } = pos.coords
      previewLatLng.value = { lat: latitude, lng: longitude }
      await nextTick()
      // 这里需要引入腾讯地图SDK
      // eslint-disable-next-line no-undef
      if (typeof TMap !== 'undefined') {
        previewMap = new TMap.Map('previewMap', {
          center: new TMap.LatLng(latitude, longitude),
          zoom: 16
        })
        // eslint-disable-next-line no-undef
        new TMap.MultiMarker({
          map: previewMap,
          geometries: [{
            id: 'me',
            position: new TMap.LatLng(latitude, longitude)
          }]
        })
      }
    },
    (err) => {
      console.log('定位失败', err)
      alert('定位失败，请检查权限设置')
    }
  )
}

const uploadLocation = async () => {
  if (!previewLatLng.value) return
  try {
    await axios.post('/api/photo/photographer/update-location', null, {
      params: {
        id: userStore.user?.id,
        latitude: previewLatLng.value.lat,
        longitude: previewLatLng.value.lng
      }
    })
    alert('位置已更新！')
    previewLatLng.value = null
  } catch (error) {
    alert('位置更新失败')
  }
}

const cancelPreview = () => {
  previewLatLng.value = null
}

// 获取头像列表
const fetchAvatars = async () => {
  const res = await api.get('/avatar/list', { params: { userId: userInfo.id } })
  avatarList.value = res.data || []
  // 自动刷新当前头像
  const current = avatarList.value.find((a: any) => a.isCurrent === 1)
  if (current) userInfo.avatar = current.url
}

// 模拟图片上传（本地Base64），实际可替换为后端文件上传接口
const handleAvatarUpload = async (option: any) => {
  const file = option.file
  const formData = new FormData()
  formData.append('file', file)
  // 1. 上传到腾讯云COS
  const res = await api.post('/file/upload', formData, { headers: { 'Content-Type': 'multipart/form-data' } })
  const url = res.data
  // 2. 存入头像表
  await api.post('/avatar/upload', { userId: userInfo.id, url })
  ElMessage.success('上传成功')
  fetchAvatars()
  await fetchUserInfo() // 上传头像后同步用户信息
}

const setCurrentAvatar = async (id: number) => {
  await api.put(`/avatar/${id}/setCurrent`, null, { params: { userId: userInfo.id } })
  ElMessage.success('已设为当前头像')
  fetchAvatars()
  await fetchUserInfo() // 设为当前头像后同步用户信息
}

const deleteAvatar = async (id: number) => {
  await api.delete(`/avatar/${id}`)
  ElMessage.success('已删除')
  fetchAvatars()
  await fetchUserInfo() // 删除头像后同步用户信息
}

const uploadAvatar = () => {
  avatarDialogVisible.value = true
  fetchAvatars()
}

const handleCoverUploadSuccess = (response: any) => {
  newWork.value.coverImage = response.data
}
const handleImageUploadSuccess = (response: any, file: any, fileListArr: any) => {
  if (response.data) {
    newWork.value.imageUrls.push(response.data)
  }
  imageFileList.value = fileListArr
}

const fetchPhotographerId = async () => {
  const res = await api.get('/photo/photographer/list')
  console.log('【调试】摄影师列表返回：', res.data)
  if (!userInfo.id) return
  const photographer = (res.data || []).find(
    (p: any) => p.userId == userInfo.id
  )
  if (photographer) myPhotographerId.value = photographer.id
}

const submitWork = async () => {
  if (!userInfo.id) {
    ElMessage.error('用户信息未加载，请稍后重试')
    return
  }
  if (!myPhotographerId.value) {
    ElMessage.error('当前账号不是摄影师，无法上传作品')
    return
  }
  if (!newWork.value.title || !newWork.value.coverImage) {
    ElMessage.warning('请填写标题并上传封面')
    return
  }
  // 组装作品数据
  const payload = {
    ...newWork.value,
    photographerId: myPhotographerId.value, // photographerId用photographer表主键
    imageUrls: JSON.stringify(newWork.value.imageUrls),
    shootingDate: newWork.value.shootingDate || null
  }
  await api.post('/portfolio', payload)
  ElMessage.success('作品上传成功')
  showUploadDialog.value = false
  // 清空表单
  newWork.value = { title: '', description: '', category: '', tags: '', coverImage: '', imageUrls: [], shootingDate: '', shootingLocation: '', equipment: '' }
  imageFileList.value = []
}

//保存修改
const saveProfile = async () => {
  saving.value = true
  try {
    // 校验表单
    await formRef.value?.validate()
    // 提交数据到后端
    await api.post('/photo/user/update', [
      {
        id: userInfo.id,
        realName: editUserInfo.realName,
        phone: editUserInfo.phone,
        gender: editUserInfo.gender,
        birthday: editUserInfo.birthday
      }
    ])
    ElMessage.success('保存成功')
    await fetchUserInfo() // 重新拉取用户信息，确保数据同步
  } catch (e) {
    ElMessage.error('保存失败，请检查输入')
  } finally {
    saving.value = false
  }
}

const fetchOrderStats = async () => {
  if (!userStore.user?.id) return
  try {
    const res = await api.get(`/orders/user/${userStore.user.id}`)
    const orders = res.data || []
    stats.totalOrders = orders.length
    stats.completedOrders = orders.filter((o: any) => o.status === 'COMPLETED').length
    stats.pendingOrders = orders.filter((o: any) => ['PENDING', 'CONFIRMED', 'IN_PROGRESS'].includes(o.status)).length
  } catch (e) {
    // 可选：错误处理
  }
}

onMounted(() => {
  if (userStore.user && userStore.user.id) {
    fetchUserInfo()
  }
  fetchPhotographerId()
  fetchOrderStats()
  checkPhotographer()
  fetchAddressList()
})

onUnmounted(() => {
  if (codeTimer.value) clearInterval(codeTimer.value)
})

watchEffect(() => {
  console.log('userInfo.phone:', userInfo.phone)
})
</script>

<style scoped>
.profile-page {
  max-width: 1200px;
  margin: 0 auto;
}

.page-header {
  text-align: center;
  margin-bottom: 30px;
}

.page-header h1 {
  font-size: 2.5rem;
  color: #333;
  margin-bottom: 10px;
}

.page-header p {
  color: #666;
  font-size: 1.1rem;
}

.profile-card {
  margin-bottom: 20px;
  text-align: center;
}

.profile-avatar {
  margin-bottom: 20px;
}

.profile-avatar img {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  object-fit: cover;
  margin-bottom: 15px;
}

.profile-info h3 {
  margin: 0 0 10px 0;
  color: #333;
}

.profile-info p {
  margin: 0 0 15px 0;
  color: #666;
}

.stats-card {
  margin-bottom: 20px;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.stat-item {
  text-align: center;
}

.stat-number {
  font-size: 2rem;
  font-weight: bold;
  color: #409eff;
  margin-bottom: 5px;
}

.stat-label {
  color: #666;
  font-size: 0.9rem;
}

.edit-card,
.password-card,
.security-card {
  margin-bottom: 20px;
}

.security-items {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.security-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px;
  border: 1px solid #eee;
  border-radius: 8px;
  background: #f9f9f9;
}

.security-info h4 {
  margin: 0 0 5px 0;
  color: #333;
}

.security-info p {
  margin: 0;
  color: #666;
  font-size: 0.9rem;
}

.address-preview {
  margin-top: 20px;
}

.address-item {
  margin-bottom: 8px;
}

.avatar-list {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 16px;
}
.avatar-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  border: 1px solid #eee;
  border-radius: 8px;
  padding: 8px;
  width: 100px;
  position: relative;
}
.avatar-img {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  object-fit: cover;
  margin-bottom: 8px;
}
.avatar-item.current {
  border: 2px solid #409EFF;
}

.portfolio-card {
  margin-top: 24px;
}
</style> 